<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts演示</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #echart01 {
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid #000
        }

    </style>
    <!-- 引入Echarts的JS文件
      方式01：使用CDN引入
      方式02：下载到本地引入
    -->
    <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个div放置echarts图 -->
<div id="echart01"></div>
</body>
</html>
<script>
    //实例化一个对象并且配置
    var myecharts = echarts.init(document.getElementById('echart01'));

    //设置echart属性
    var option = {
        title: {
            text: 'Echarts入门实例',
            x: 'center',
            y: 'bottom',
        },
        legend: {
            data: ['2018', '2019']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: ['冰箱', '洗衣机', '空调', '电视', '微波炉', '热水器']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '2018',
                data: [120, 200, 150, 80, 70, 110],
                type: 'bar',
                showBackground: true,
            },
            {
                name: '2019',
                data: [234, 312, 190, 102, 89, 211],
                type: 'bar',
                showBackground: true,
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myecharts.setOption(option);
</script>

